<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mixins 混入选项操作</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>mixins 混入选项操作</h1>
    <pre>
      Mixins一般有两种用途：

1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。

2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。

一、Mixins的基本用法
我们现在有个数字点击递增的程序，假设已经完成了，这时我们希望每次数据变化时都能够在控制台打印出提示：“数据发生变化”.

代码实现过程:
<textarea name="name" rows="29" cols="80">
  <h1>Mixins Option Demo</h1>
      <hr>
      <div id="app">
          <p>num:{{ num }}</p>
          <P><button @click="add">增加数量</button></P>
      </div>

      <script type="text/javascript">
          //额外临时加入时，用于显示日志
          var addLog={
              updated:function(){
                  console.log("数据放生变化,变化成"+this.num+".");
              }
          }
          var app=new Vue({
              el:'#app',
              data:{
                  num:1
              },
              methods:{
                  add:function(){
                      this.num++;
                  }
              },
              mixins:[addLog]//混入
              //实例混入 加s
          })
      </script>
</textarea>
二、mixins的调用顺序
从执行的先后顺序来说，都是混入的先执行 > 然后构造器里的再执行，需要注意的是，这并不是方法的覆盖，而是被执行了两边。

在上边的代码的构造器里我们也加入了updated的钩子函数：
<textarea name="name" rows="8" cols="80">
  updated:function(){
        console.log("构造器里的updated方法。")
  },
</textarea>
这时控制台输出的顺序是：
<textarea>
  mixins数据放生变化,变化成2.
  构造器里的updated方法。
</textarea>
PS：当混入方法和构造器的方法重名时，混入的方法无法展现，也就是不起作用。

三、全局API混入方式
我们也可以定义全局的混入，这样在需要这段代码的地方直接引入js，就可以拥有这个功能了。我们来看一下全局混入的方法：


<textarea name="name" rows="8" cols="80">
Vue.mixin({
  //全局的不加的s
    updated:function(){
        console.log('我是全局被混入的');
    }
})


</textarea>
PS：全局混入的执行顺序要前于混入和构造器里的方法。

全局混入的方法 > 选项混入的方法 > 构造器里的最后执行的方法


    </pre>


    <hr>
    <div id="app">
      {{num}}
      <p>
        <button @click="add" type="button" name="button">add</button>
      </p>
    </div>
    <script>
    var addConsole = {
      updated:function(){
        console.log("数据发展变化时" + this.num + "我是混入的updated")
      }
      //生命周期  数据变化时
    };
    //全局APi
    Vue.mixin({
      updated:function(){
        console.log("我是全局的混入")
      }
    })
        var app=new Vue({
            el:"#app",
            data:{
              num:1
            },
            methods:{
              add:function(){
                this.num++
              }
            },
            mixins:[addConsole],
            updated:function(){
              console.log("我是原生的undated")
            }
        })
    </script>
</body>
</html>
